<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览者交互，表单标签 </title>
    <style type="text/css">
        h2 {
            color: black;
            background: green;
        }
    </style>
</head>
<body>

<!--============================分割线===============================-->
<h2>使用表单标签，与用户交互</h2>


<form method="post" action="只想滴URL或者说是Action">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username"/>
    <label for="pass">密码:</label>
    <input type="password" name="pass" id="pass"/>
</form>

<!--============================分割线===============================-->
<h2>文本输入框、密码输入框</h2>
<form>
    姓名：<input type="text" name="myName" value="username">
    <br/>
    密码：<input type="password" name="pass" value="password">
    <br/>
    男：<input type="checkbox" name="pass" value="password">
</form>


<!--============================分割线===============================-->
<h2>文本域，支持多行文本输入</h2>

<form method="post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10">在这里输入内容...</textarea>
</form>


<!--============================分割线===============================-->
<h2>使用单选框、复选框，让用户选择</h2>

<form action="www.baidu.com" method="get">


    <input type="radio" value="喜欢" name="name1" checked="checked"/>喜欢
    <input type="radio" value="不喜欢" name="name1"/>不喜欢
    <input type="radio" value="无所谓" name="name1"/>无所谓

    <br/>
    <input type="checkbox" value="跑步" name="checkbox1" checked="checked"/>跑步
    <input type="checkbox" value="登山" name="checkbox2"/> 登山
    <input type="checkbox" value="打球" name="checkbox3"/>打球
    <input type="checkbox" value="健身" name="checkbox4"/>健身
    <input type="submit" value="提交" name="sub_btn">
</form>


<!--============================分割线===============================-->
<h2>使用下拉列表框，节省空间</h2>

<form action="save.php" method="post">
    <label>爱好:</label>
    <select>
        <option value="看书">看书</option>
        <option value="旅游" selected="selected">旅游</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
    </select>
</form>

<!--============================分割线===============================-->
<h2>使用下拉列表框进行多选</h2>

<form action="" method="post">
    <label>爱好:</label>
    <select multiple="multiple">
        <option value="看书">看书</option>
        <option value="旅游">旅游</option>
        <option value="运动">运动</option>
        <option value="购物">购物</option>
    </select>
</form>

<!--============================分割线===============================-->
<h2>使用提交按钮，提交数据</h2>

<form method="post" action="save.php">
    <label>姓名：</label>
    <input type="text" value=" " name="myName "/>
    <input type="submit" value="提交" name="submitBtn"/>
</form>


<!--============================分割线===============================-->
<h2>使用重置按钮，重置表单信息</h2>
<form method="get" action="save.php">
    <label>姓名：</label>
    <input type="text" value=" " name="myName "/>
    <label>学号：</label>
    <input type="text" value=" " name="myNumber "/>
    <input type="submit" value="提交" name="submitBtn"/>
    <input type="reset" value="重置">
</form>


<!--============================分割线===============================-->
<h2>form表单中的label标 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。</h2>

<form>
    <label for="male">男</label>
    <input type="radio" name="gender" id="male"/>
    <br/>
    <label for="female">女</label>
    <input type="radio" name="gender" id="female"/>
    <label for="email">输入你的邮箱地址</label>
    <input type="email" id="email" placeholder="请输入你的邮件">
</form>

</body>
</html>